<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 全选 -->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="chkAll" />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="msg"
      @keyup.enter="add"
    />
  </header>
</template>

<script>
export default {

    props: [ 'list' ],

    data() {
      return {
        msg: '',
      };
    },

    methods: {

      add () {
        
        // 1. 非空判断
        if (this.msg == '') return alert('任务名不能为空')

        // 2. 不为空才加到数组里
        // 数组在哪里？在App.vue里，所以我应该把输入的任务
        // 交给父组件去添加，就要用到子传父
        this.$emit('addTodo', this.msg)

        // 3. 清空输入的内容
        this.msg = ''
      }
    },

    // 计算属性
    computed: {

      chkAll: {
        // 既要对计算属性取值
        get () {

            // 首先要拿到数组才行，再判断数组里如果有一个是false结果就应该是false
            return this.list.every( v => v.isDone)
        },

        // 也要对计算属性赋值
        set (val) {

          this.list.forEach( v => v.isDone = val )
        }

      }
    }
}
</script>